<template><!---->
	<div id="test">
	<div v-if="type == 0">
	    <div style="background: var(--table-tr-hover-color);padding:10px;margin-top:10px;"> 
	      <!--<title-top :fnlist="initObj.Fnlist"></title-top>-->
	                      异常次数最多的题目 <Tag color="purple">{{exceptionTotalStatics.topTargetName || '无'}}</Tag>
		    <Button type="primary" @click="queryTargetExceptionInfo.pageIndex = 1;getTargetExceptionDetail()" style="margin-left:20px">异常详情</Button>
	    </div>
	</div>   
    <!--<title-top :fnlist="initObj.Fnlist"></title-top>-->
    <table-body :options="initObj"></table-body>
    <Modal v-model="exceptionDetailModal.show"
               :title="exceptionDetailModal.title"
               width="1000"
               :mask-closable = "false"
               footer-hide
        >
        <Row class="targetHeader" v-if="exceptionDetailTotal > 0">
            <Page :total="exceptionDetailTotal"
                  :page-size="queryTargetExceptionInfo.pageSize"
                  show-total show-elevator
                  @on-change="changeExceptionDetailPage" style="float: right">
            </Page>
        </Row>
        <TableList :columns="exceptionDetailColumn" :data="exceptionDetailList" style="max-height:80vh"></TableList>
    </Modal>
    <Modal v-model="cycleExceptionDetailModal.show"
               :title="cycleExceptionDetailModal.title"
               width="1000"
               :mask-closable = "false"
               footer-hide
        >
        <Row class="targetHeader">
        	<Input v-model.trim="queryCycleTargetExceptionInfo.teamName"  placeholder="请输入团队名称" style="width: 180px;margin-right:15px;"  clearable @on-change="changeCycleExceptionDetailPage(1)"  v-if="detailType == 'cycle'"/>
            <Page :total="cycleExceptionDetailTotal"
                  :page-size="queryCycleTargetExceptionInfo.pageSize"
                  show-total show-elevator
                  @on-change="changeCycleExceptionDetailPage" style="float: right" v-if="cycleExceptionDetailTotal > 0">
            </Page>
        </Row>
        <TableList :columns="cycleExceptionDetailColumn" :data="cycleExceptionDetailList" style="max-height:80vh"></TableList>
    </Modal>
  </div>
</template>
<script>
//	import Cookies from 'js-cookie'
import {awdTargetExceptionLog,targetExceptionLog,targetExceptionDetail,getTargetTeamList_new} from '@/api/drill_compete'
import tableBody from '@/view/drill_compete/page/statistics/tableListComponent'
import questionMixin from "@/mixin/questionMixin"
export default {
    name: 'teamRankStatic',
    props:['type'],
    mixins: [questionMixin],
	data(){
    const d = function(val){
      this.getTargetExceptionLog(null,null,val)
    }.bind(this);
	  	return {
            targetTeamData: [],
	  	  initObj:{
            Button:[
            ],
            Input:[
            ],
            Select:[
                {
                    optionsValue: [],
                    placeholder: `请选择题目`,
                    fnName: this.getTargetExceptionLogById
                }
            ],
            DatePicker:{
              isShow:false,
              fnName:d,
            },
            Page:{
              total:0,
              currentPage:1,
              pageSize:10
            },
            Table:{
              listCol:[
//              {
//                type: 'index',
//                align: 'center',
//                key:'rank',
//                ellipsis:true,
//                width:60
//              },
                {
                  title:'题目显示名称',
                  key:'targetName',
                  align:'center',
                  ellipsis:true,
                  tooltip:true,
                  width:240,
                  placement:'top-left'
                },
//              {
//	              title:'团队名称',
//	              key:'teamName',
//	              align:'center',
//	              ellipsis:true,
//	              tooltip:true,
//	              width:100,
//                placement:'top-left'
//	            },
                {
					title:'周期',
	                key:'number',
	                align:'center',
	//              ellipsis:true,
//	              	tooltip:true,
	                render:(h,params) => {
	                  	return h('span',params.row.number ? `第${params.row.number}周期` : '无')
	                }
				},
                {
	        		title:'异常次数',
	        		key:'oneCount',
	        		render:(h,params) => {
	                  	return h('Tag',{
	                  		props:{
	                  			color:'purple'
	                  		},
	                  		style:{
	                  			cursor:'pointer!important'
	                  		},
	                  		nativeOn:{
	                  			'click':() => {
	                  				this.detailType = 'cycle';
	                  				this.queryCycleTargetExceptionInfo.targetId = params.row.targetId;
									this.queryCycleTargetExceptionInfo.cycleId = params.row.cycleId;
									this.queryCycleTargetExceptionInfo.teamName = '';
									this.queryCycleTargetExceptionInfo.pageIndex = '';
	                  				this.getCycleTargetExceptionLog();
	                  			}
	                  		}
	                  	},params.row.oneCount)
	                }
	        	},
	        	{
	            	title:'状态',
	              	key:'status',
	              	align:'center',
	              	ellipsis:true,
	              	tooltip:true,
	              	placement:'top-right',
	              	render:(h,params) =>{
	              		return h('span',this.statusFilter(params.row.status))
	              	}
				}
              ],
              listData:[]
            },
            Fnlist:'getTargetExceptionLog',
        },
//      sencenId:'',
        selName:'',
        selTargetName:'',
        timeout:{},
        exceptionTotalStatics:{},
        //异常详情
        exceptionDetailModal:{
        	show:false,
        	title:'异常详情'
        },
        exceptionDetailList:[],
        exceptionDetailTotal:[],
        exceptionDetailColumn:[
        	{
        		title:'题目显示名称',
        		key:'targetName',
        		tooltip:true,
                placement:'top-left',
                width:150
        	},
        	{
        		title:'异常次数',
        		key:'oneCount',
        		placement:'top-left',
        	},
        ],
        queryTargetExceptionInfo:{
        	pageIndex:1,
        	pageSize:10,
        	teamName:'',
        },
        //题目周期异常详情
        cycleExceptionDetailModal:{
        	show:false,
        	title:'异常详情'
        },
        cycleExceptionDetailList:[],
        cycleExceptionDetailTotal:[],
        queryCycleTargetExceptionInfo:{
        	pageIndex:1,
        	pageSize:10,
        	sceneId:this.$route.query.id,
        	teamName:'',
        },
        cycleExceptionDetailColumn:[
//      	{
//      		title:'题目显示名称',
//      		key:'targetName',
//      		tooltip:true,
//              placement:'top-left',
//              width:150
//      	},
    	    {
              title:'团队名称',
              key:'teamName',
              align:'center',
              ellipsis:true,
              tooltip:true,
              placement:'top-left',
            },
            {
              title:'检测结果时间',
              key:'checkTime',
              align:'center',
              ellipsis:true,
              tooltip:true,
            },
			{
			  title:'异常原因',
			  key:'errMsg',
			  align:'center',
			  ellipsis:true,
			  tooltip:true,
			}
        ],
        detailType:'all'
      }
	},
    components:{
//    'title-top':titleTop,
      'table-body':tableBody,
    },
    watch:{
        targetTeamData(newValue) {
            if ([1, 8, 9].includes(this.type)) {
                this.initObj.Select[0].optionsValue = newValue
            }
        },
        questionList(newValue) {
            if ([0].includes(this.type)) {
                this.initObj.Select[0].optionsValue = newValue
            }
        }
    },
    created(){
      //this.getRankingStatic();
    },
	mounted(){
		if(this.type == 1){
			this.initObj.Table.listCol.splice(1,0,{
				title:'团队名称',
                key:'teamName',
                tooltip:true,
                placement:'top-left',
                width:80
			})  
		}
    	this.getTargetExceptionLog();
		this.getTargetTeamList()
	},
	beforeDestroy(){
		clearTimeout(this.timeout)
	},
	methods:{
        getTargetTeamList(){
            getTargetTeamList_new({
                pageIndex:1,
                pageSize:2147483647,
                sceneId:this.$route.query.id,
                projectId:this.$route.query.prjid
            }).then(data => {
                if(data.code==1){
                    this.targetTeamData = data.data.items || data.data;
                }
            })
        },
		getTargetExceptionDetail(){
			targetExceptionDetail(this.$route.query.id,this.queryTargetExceptionInfo).then(data => {
				if(data.code == 1){
					this.exceptionDetailList = data.data.items;
					this.exceptionDetailTotal = data.data.total;
				}else{
					this.$Message.error(data.message);
				}
				this.exceptionDetailModal.show = true;
			}).catch(error => {
			})
		},
		changeExceptionDetailPage(page){
			this.queryTargetExceptionInfo.pageIndex = page;
			this.getTargetExceptionDetail();
		},
		changeCycleExceptionDetailPage(page){
			this.queryCycleTargetExceptionInfo.pageIndex = page;
			this.getCycleTargetExceptionLog();
		},
		getCycleTargetExceptionLog(){
			this.detailType = 'cycle';
			let params = JSON.parse(JSON.stringify(this.queryCycleTargetExceptionInfo));
			targetExceptionLog(params).then(data => {
				if(data.code == 1){
					this.cycleExceptionDetailList = data.data.items;
					this.cycleExceptionDetailTotal = data.data.total;
				}else{
					this.$Message.error(data.message);
				}
				this.cycleExceptionDetailModal.show = true;
			}).catch(error => {
			})
		},
        getTargetExceptionLogById(id) {
          let list = []
          if ([1, 8, 9].includes(this.type)) {
            list = this.targetTeamData
          }
          if ([0].includes(this.type)) {
            list = this.questionList
          }
          let question = list.find(item => {
            return item.id === id
          })
          this.selTargetName = question ? question.name : ''
          this.getTargetExceptionLog()
        },
	    getTargetExceptionLog(page,pageSize,querytime){
	      let _this = this;
	      let pages = page || 1;
        this.$set(this.initObj.Page, 'currentPage', pages)
	      let rows = pageSize||_this.PZ|| 10;
	      let id = '';
	      let params={
	        pageIndex : pages,
	        pageSize : rows
	      };
	      if(this.selName){
	        params.teamName =  this.selName;
	      }
	      if(this.selTargetName){
	        params.targetName =  this.selTargetName;
	      }
	      //if(querytime){
	        //params.createtime = querytime[0];
	        //params.lastupdatetime = querytime[1];
	      //}
	      if(_this.$route.query.id){
	        awdTargetExceptionLog(this.$route.query.id,params).then(data=>{
	          if(data.code==1){
	          	_this.exceptionTotalStatics = data.data;
	            _this.initObj.Table.listData = data.data.items;
	            _this.initObj.Page.total = data.data.total;
	            clearTimeout(this.timeout)
            	this.timeout = setTimeout(() => {
            		this.getTargetExceptionLog(page,pageSize);
            	},3000)
	          }
	        })
	      }
	    },
	    saveInfo(val){
	    },
	    statusFilter(val){
	      let str = '';
	      switch (val) {
	      	case 0:str = '异常未统计';break;
	        case 1:str = '异常已统计';break;
	        case 2:str = '取消统计';break;
	        default:break;
	      }
	      return str;
	    }
    },
}
</script>

<style>
  .drillsTable .ivu-poptip-body {
    text-align: left!important;
  }
  .scenesHeader{
    margin-bottom: 16px;
  }
  .drillTables{
    min-height: 300px;
  }
  .drillsTable.ivu-table-wrapper{
    overflow: inherit;
  }
</style>
<style scoped>
  .Titles{
    background: #eeeeee;
    margin: 16px auto;
    padding: 10px 0;
  }
  .targetHeader{
    /*padding: 10px;*/
    margin-bottom: 10px;
  }
</style>
